<script setup lang="ts">
import CountTo, { CountToProps, TransitionPresets } from '@/components/CountTo';
import { TransitionPresets as TransitionPresetsData } from '@vueuse/core';

const TransitionPresetsKeys = Object.keys(TransitionPresetsData) as TransitionPresets[];

const countToProps = reactive<CountToProps & { transition: TransitionPresets }>({
  decimal: '.',
  decimals: 2,
  decimalStyle: {
    fontSize: 'small',
    fontStyle: 'italic',
  },
  delay: 0,
  disabled: false,
  duration: 2000,
  endVal: 100_000,
  mainStyle: {
    color: 'var(--el-color-primary)',
    fontSize: 'xx-large',
    fontWeight: 'bold',
  },
  prefix: '￥',
  prefixStyle: {
    paddingRight: '0.5rem',
  },
  separator: ',',
  startVal: 0,
  suffix: '元',
  suffixStyle: {
    paddingLeft: '0.5rem',
  },
  transition: 'easeOutQuart',
});
function onStarted() {
  ElMessage.info({
    message: '动画已开始',
    grouping: true,
  });
}

function onFinished() {
  ElMessage.success({
    message: '动画已结束',
    grouping: true,
  });
}
function changeNumber() {
  countToProps.endVal = Math.floor(Math.random() * 100_000_000) / 10 ** (countToProps.decimals || 0);
}
</script>

<template>
  <PageCard title="CountTo基本用法">
    <div class="flex w-full items-center justify-center pb-4">
      <CountTo v-bind="countToProps" @started="onStarted" @finished="onFinished" />
    </div>
    <el-form :model="countToProps" label-width="100">
      <ResponsiveRow>
        <el-form-item label="初始值" name="startVal">
          <el-input-number v-model="countToProps.startVal" :step="100" />
        </el-form-item>
        <el-form-item label="当前值" name="endVal">
          <div class="flex flex-center">
            <el-input-number v-model="countToProps.endVal" class="w-full" :precision="countToProps.decimals" />
            <el-button v-ripple type="primary" icon="Discount" @click="changeNumber">随机数</el-button>
          </div>
        </el-form-item>
        <el-form-item label="禁用动画" name="disabled">
          <el-switch v-model="countToProps.disabled" />
        </el-form-item>
        <el-form-item label="延迟动画" name="delay">
          <el-input-number v-model="countToProps.delay" :min="0" :step="100" />
        </el-form-item>
        <el-form-item label="持续时间" name="duration">
          <el-input-number v-model="countToProps.duration" :min="0" :step="100" />
        </el-form-item>
        <el-form-item label="小数位数" name="decimals">
          <el-input-number v-model="countToProps.decimals" :min="0" :precision="0" />
        </el-form-item>
        <el-form-item label="分隔符" name="separator">
          <el-input v-model="countToProps.separator" />
        </el-form-item>
        <el-form-item label="小数点" name="decimal">
          <el-input v-model="countToProps.decimal" />
        </el-form-item>
        <el-form-item label="动画" name="transition">
          <el-select v-model="countToProps.transition">
            <el-option v-for="preset in TransitionPresetsKeys" :key="preset" :value="preset">
              {{ preset }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="前缀" name="prefix">
          <el-input v-model="countToProps.prefix" />
        </el-form-item>
        <el-form-item label="后缀" name="suffix">
          <el-input v-model="countToProps.suffix" />
        </el-form-item>
      </ResponsiveRow>
    </el-form>
  </PageCard>
</template>
